<template>
	<view class="dynamic_recommendation">
		<slot></slot>
		<view class="recommendation_list">
			<view @click="showDetail(item)" class="recommendation_item" v-for="(item,index) in recommendationList">
				<img class="recommendation_item_img" :src="item.cover!=1?item.cover:'https://www.mopkeji.com/uploads/20210518/a4024106e11f447bd503b1bad8e2b0c0.jpg'"
				 :alt="item.title" />
				<view class="item_right">
					<text style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 28rpx;color: #000000;">{{ item.title }}</text>
					<!-- 将富文本的内容分离出文本 -->
					<text style="margin-top: 8rpx;">{{getAbstract(item.content)}}</text>
					<view class="function">
						<text>{{ item.createtime.split(' ')[0] }}</text>
						<view class="recommendation_function">
							<view>
								<img src="/static/home/view.png" alt="浏览数" />
								{{ item.view }}
							</view>
							<view>
								<img src="/static/home/good.png" alt="点赞数" />
								{{ item.likes }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			recommendationList:{
				type: Array,
				default: []
			}
		},
		methods: {
			showDetail(item){
				uni.navigateTo({
					url: '/pages/dynamic/detail?id='+item.id
				});
			},
			getAbstract(content){
				const reg = /<[^>]+>/gi; //筛选标签
				if(content)
					return content.split(reg).filter(
					item => (item !== '')&&(item !== '\n')).join('。');
				else return '';
			},
		}
	}
</script>

<style scoped lang="scss">
.dynamic_recommendation{
	display: flex;
	flex-direction: column;
	margin-bottom: 42rpx;
}
.recommendation_item{
	display: flex;
	flex-wrap: wrap;
	padding: 2rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 22rpx;
	color: rgba(0,0,0,0.65);
	background: #FFFFFF;
	margin-bottom: 16rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	.recommendation_item_img{
		width: 208rpx;
		height: 156rpx;
		margin-right: 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.item_right{
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 20rpx 0rpx 12rpx 24rpx;
		margin-right: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text{
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
		}
		.function{
			margin-top: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: DIN, DIN;
			color: rgba(0,0,0,0.45);
			.recommendation_function{
				display: flex;
				align-items: center;
				view{
					margin-right: 32rpx;
					display: flex;
					align-items: center;
					img{
						width: 22rpx;
						height: 22rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 680rpx){
	.recommendation_item .recommendation_item_img{
		width: 100%;
		aspect-ratio: 11/8;
		margin-right: 0rpx;
	}
}
</style>
